<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <mv-body>
            <!-- 3. 使用template标签，#default 表示的是，插槽的名字就叫做 default,
                    #default = "传递过来的参数的对象"
                    #default = "{list}"
            -->
           <template #default="{list}">
               <!-- 4. 在 template 标签内容，使用 list,通过 v-bind 进行数据传递 -->
            <hot-movie :arr="list"></hot-movie>
           </template>
        </mv-body>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component("mv-body",{
            /* 1. 添加骨架屏 2. 添加数据的请求 */
            data:function(){
                return {
                    /* 1. 定义传给 插槽的数据 */
                    list:[1,2,3,4,5]
                }
            },
            template:`
                <div>
                        <h1>插槽的演示</h1>
                        /* 2.通过 slot上面绑定 属性，进行值的传递 */
                        <slot :list='list' :name='123'></slot>
                </div>
            `
        })
        Vue.component("hot-movie",{
            /* 5. 通过 props 的形式，接受传递进来的参数 */
            props:['arr'],
            template:`
                <div>
                        热映{{arr}}
                </div>
            `
        })
        let vm = new Vue({
            el:"#app",
            data:{
                msg:"hello"
            },
        })
    </script>
</body>
</html>